$(function() {
	var form = layui.form;
	form.on('radio(siteim-aspectRatio)', function(data){
		console.log(data.elem); //得到radio原始DOM对象
		console.log(data.value); //被点击的radio的value值
		//调整长宽比
		siteimCropper.options.aspectRatio = eval($(this).attr("siteim-aspectRatio"));
		siteimCropper.clear();
		siteimCropper.crop();
	});
	form.render();


	var Cropper = window.Cropper;
	var $cropperImg = $('#tailoringImg');
	var cropperImg = $cropperImg[0];
	var dataHeight = document.getElementById('dataHeight');
	var dataWidth = document.getElementById('dataWidth');

	var cropperOptions = {
		aspectRatio: 1 / 1, //默认比例
		preview: '.previewImg', //预览视图
		guides: true, //裁剪框的虚线(九宫格)
		
		autoCropArea: 1, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
		autoCrop: true,  //选择图片后，是否自动划出一个选中区

		movable: true, //是否允许移动图片
		dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
		resizable: true, //是否允许改变裁剪框的大小
		zoomable: true, //是否允许缩放图片大小
		mouseWheelZoom: true, //是否允许通过鼠标滚轮来缩放图片
		touchDragZoom: true, //是否允许通过触摸移动来缩放图片
		rotatable: true, //是否允许旋转图片
		crop: function (e) {
			// 输出结果数据裁剪图像。
			var data = e.detail;
			log(e.type);
			log(data);
			$("#cropper_data").css("display", "");
			$("#dataHeight").html(Math.round(data.height) + "px") ;
			$("#dataWidth").html(Math.round(data.width) + "px") ;
		}
	}

	var siteimCropper = new Cropper(cropperImg, cropperOptions);

	function resizeWindow() {
		var win_height = $(window).height();
		var win_width = $(window).width();
		if (win_width <= 768) {
			$('.tailoring-content').css({
				top: (win_height - $('.tailoring-content').outerHeight()) / 2,
				left: 0
			});
		} else {
			$('.tailoring-content').css({
				top: (win_height - $('.tailoring-content').outerHeight()) / 2,
				left: (win_width - $('.tailoring-content').outerWidth()) / 2
			});
		}
	}
	$(window).resize(function() {
		resizeWindow();
    });
    resizeWindow();

	//弹出图片裁剪框
	$('.siteim_cutImg').on('click', function() {
		if (!curruser) {
			tiosite_show_login(1);
		} else {
			$('.tailoring-container').toggle();
		}		
	});


	//图像上传
	$('#chooseImg').on('change', function() {
		var file = $(this)[0];
		if (!file.files || !file.files[0]) {
			return;
		}
		var reader = new FileReader();
		reader.onload = function(evt) {
			var f = evt.target;
			var replaceSrc = f.result;
			//更换cropper的图片
			siteimCropper.replace(replaceSrc, false);
		};
		reader.readAsDataURL(file.files[0]);
		reader["tio_file"] = file;
	});

	
	//旋转
	$('.cropper-rotate-btn').on('click', function() {
		siteimCropper.rotate(45);
	});
	//复位
	$('.cropper-reset-btn').on('click', function() {
		siteimCropper.reset();
	});
	//换向
	var flagX = true;
	$('.cropper-scaleX-btn').on('click', function() {
		if (flagX) {
			siteimCropper.scaleX(-1);
			flagX = false;
		} else {
			siteimCropper.scaleX(1);
			flagX = true;
		}
		flagX != flagX;
	});

	

	//裁剪后的处理
	$('#sureCut').on('click', function() {
		if ($cropperImg.attr('src') == null) {
			return false;
		} else {
			var canvas = siteimCropper.getCroppedCanvas(); //获取被裁剪后的canvas
			// var base64url = canvas.toDataURL('image/jpeg', 0.4); //转换为base64地址形式

			canvas = siteimCropper.getCroppedCanvas({
				// width : 40,
				// maxWidth : 1080,
				minWidth : 1,
				// height : 40,
				// maxHeight : 720,
				minHeight : 1
			});
			
			canvas.toBlob(function (blob) {
				// var downloadA = document.createElement("a");
				// document.body.appendChild(downloadA);
				// downloadA.style.display = "none";
				// downloadA.setAttribute("download", "download.jpg");
				// downloadA.setAttribute("href", URL.createObjectURL(blob));
				// downloadA.click();
				var fd = new FormData();
				fd.append("uploadFile", blob, $('#chooseImg')[0].files[0].name + ".jpg");
				ajax.post("/user/updateAvatar", {
					data: fd,
					contentType: false, // 注意这里应设为false
					processData: false,
					timeout: 500000,
					success: function (resp) {
						//关闭裁剪框
						closeTailor();
						if (resp.ok) {
							//$('#finalImg').prop('src', resp.data); //显示为图片的形式
							// layer.msg("发送成功");

							curr();
							$("#avatar").attr("src", res_url(curruser.avatar));
							$("#tiosite_user_avatar").attr("src", res_url(curruser.avatar));
							

						} else {
							layer.alert(resp.msg);
						}
					}
				});
			}, "image/jpeg", 1.0);
		}
	});
	//关闭裁剪框
});

function closeTailor() {
	$('.tailoring-container').toggle();
}
